<template>
  <div class="app-container">
    <transition name="el-collapse-transition">
      <div v-show="!isShowDetail">
        <el-form
          v-show="showSearch"
          ref="queryForm"
          :model="queryParams"
          :inline="true"
          label-width="85px"
        >
          <el-form-item label="公司名称：" prop="compName">
            <el-input
              v-model="queryParams.compName"
              placeholder="请输入公司名称"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="母公司:" prop="parCompName">
            <el-input
              v-model="queryParams.parCompName"
              placeholder="请输入公司名称"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="省：" prop="province">
            <el-input
              v-model="queryParams.province"
              placeholder="请输入地址"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <br />
          <el-form-item label="市：" prop="city">
            <el-input
              v-model="queryParams.city"
              placeholder="请输入地址"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>

          <el-form-item
            label-width="100px"
            label="成交进度："
            prop="businessProgress"
          >
            <el-select
              v-model="queryParams.businessProgress"
              filterable
              placeholder="请选择"
              @change="handleQuery"
            >
              <el-option
                v-for="dict in cus_business_options"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              >{{ dict.dictLabel }}
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="客户优先级：" prop="customRank" label-width="100px">
            <el-select
              v-model="queryParams.customRank"
              placeholder="客户优先级"
              clearable
              size="small"
              @change="handleQuery"
            >
              <el-option
                v-for="dict in cus_rank_options"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              >{{ dict.dictLabel }}
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
            >搜索</el-button>
            <el-button
              icon="el-icon-refresh"
              size="mini"
              @click="resetQuery"
            >重置</el-button>
          </el-form-item>
        </el-form>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="warning"
              plain
              icon="el-icon-download"
              size="mini"
              @click="handleExport"
            >导出</el-button>
          </el-col>
          <right-toolbar :show-search.sync="showSearch" @queryTable="getList" />
        </el-row>
        <el-table v-loading="loading" :data="kqAllInfoList" height="630" stripe>
          <el-table-column type="selection" width="55" align="center" fixed />
          <el-table-column label="母公司" show-overflow-tooltip min-width="100">
            <template slot-scope="scope">
              <div>
                <el-button
                  v-if="scope.row.parCompName"
                  size="mini"
                  type="text"
                  icon="el-icon-document-copy"
                  @click="CopyFileUrl(scope.row.parCompName)"
                /> &nbsp;<el-link
                  target="_blank"
                  :href="
                    'https://www.tianyancha.com/search?key=' + scope.row.parCompName
                  "
                >
                  {{ scope.row.parCompName }}
                </el-link>
              </div>

            </template>
          </el-table-column>
          <el-table-column label="公司名称" align="left" show-overflow-tooltip min-width="100">
            <template slot-scope="scope">
              <div>
                <el-button
                  v-if="scope.row.compName"
                  size="mini"
                  type="text"
                  icon="el-icon-document-copy"
                  @click="CopyFileUrl(scope.row.compName)"
                />&nbsp;
                <!-- <el-link
                  target="_blank"
                  :href="
                    'https://www.tianyancha.com/search?key=' + scope.row.compName
                  "
                >
                  {{ scope.row.compName }}
                </el-link> -->
                <router-link :to="'/kqinfos/type/data/' + scope.row.id " class="link-type">
                  <span>{{ scope.row.compName }}</span>
                </router-link>
              </div>

            </template>
          </el-table-column>
          <el-table-column label="网站" prop="url" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-link target="_blank" :href="scope.row.url">
                {{ scope.row.url }}
              </el-link>
            </template>
          </el-table-column>
          <el-table-column label="省/市/区县" prop="province" width="160">
            <template slot-scope="scope">
              <span>{{ scope.row.province }}/{{ scope.row.city }}/{{
                scope.row.district
              }}</span>
            </template>
          </el-table-column>

          <el-table-column label="客户优先级" align="center" prop="customRank">
            <template slot-scope="scope">
              {{ scope.row.customRank || "-" }}
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            width="150"
            class-name="small-padding"
          >
            <!-- <template slot-scope="scope">

              <el-button
                type="primary"
                icon="el-icon-notebook-2"
                circle
                @click="handleDetailView(scope.row)"
              >
            </el-button>
            </template> -->
          </el-table-column>
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          :page-sizes="[10,50,100, 200,500,1000]"
          @pagination="getList"
        />
      </div>
    </transition>
  </div>
</template>

<script>
import {
  listKqAllInfos,
  exportKqAllInfos
} from "@/api/work/work";

export default {
  name: "Work",
  data() {
    return {
      // 遮罩层
      changeLoading: false,
      loading: true,
      orderLoading: false,
      kqMaintainInfoLoading: false,
      // tab
      tabIndex: "first",
      // 选中数组
      ids: [],
      showSearch: true,
      // 总条数
      total: 0,
      orderTotal: 0,
      mainTotal: 0,
      // 岗位表格数据
      kqAllInfoList: [],
      // 订单表格数据
      kqOrderList: [],
      kqMaintainInfoList: [],
      // 是否显示数据详情页面
      isShowDetail: false,
      spanNum: 8,
      spanNum2: 3,
      labelWidth: 100,
      isAddMode: true,
      classifyList: [],
      // businessProgressList: [],
      mainTainClassifyList: [],
      kqAllOrderList: [],
      // businessProgress: undefined,
      // activeName: "first",
      // kqExtendLoading: false,
      // kqInfoLoading: false,
      // modifyLoading: false,
      // 日期范围
      // dateRange: [],
      // title: "",
      // open: false,
      // statusOptions: [
      //   {
      //     value: "-1",
      //     label: "未对接"
      //   },
      //   {
      //     value: "0",
      //     label: "希望不大"
      //   },
      //   {
      //     value: "1",
      //     label: "有希望"
      //   },
      //   {
      //     value: "2",
      //     label: "已放弃"
      //   },
      //   {
      //     value: "3",
      //     label: "已成交"
      //   }
      // ],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        // 客户优先级[默认大客户]
        // customRank: "0",
        customRank: undefined,
        compName: undefined,
        province: undefined,
        city: undefined,
        parCompName: undefined,
        businessProgress: undefined,
        isDelete: false,
        isMyCustomer: true
      },
      orderParams: {
        pageNum: 1,
        pageSize: 10,
        kqId: undefined
      },
      // 查询参数
      mainTainQueryParams: {
        pageNum: 1,
        pageSize: 10,
        compName: undefined,
        kqId: undefined
      },
      pumpOptions: [],
      cus_business_options: [],
      cus_classify_option: [],
      pump_options: [],
      cus_rank_options: [],
      // 表单参数
      form: {},
      extendForm: {},
      mainTainForm: {

      },
      rules: {
        compName: [
          { required: true, message: "公司名称不能为空", trigger: "blur" }
        ],
        compOwner: [
          { required: true, message: "公司法人不能为空", trigger: "blur" }
        ],
        empNum: [
          { required: true, message: "参保人数不能为空", trigger: "blur" }
        ],
        opStatus: [
          { required: true, message: "经营状态不能为空", trigger: "blur" }
        ],
        province: [
          { required: true, message: "省份不能为空", trigger: "blur" }
        ],
        city: [{ required: true, message: "城市不能为空", trigger: "blur" }],
        district: [
          { required: true, message: "区县不能为空", trigger: "blur" }
        ],
        address: [{ required: true, message: "详细不能为空", trigger: "blur" }],
        businessScope: [
          { required: true, message: "经营范围不能为空", trigger: "blur" }
        ]
      },
      mainTainRules: {}
    };
  },
  created() {
    this.getList();
    this.getDicts("cus_classify_option").then(response => {
      this.cus_classify_option = response.data;
    });
    this.getDicts("cus_business_options").then(response => {
      this.cus_business_options = response.data;
    });
    this.getDicts("pump_options").then(response => {
      this.pump_options = response.data;
    });
    this.getDicts("cus_rank_options").then(response => {
      this.cus_rank_options = response.data;
    });
  },
  methods: {
    /** 查询岗位列表 */
    getList() {
      this.loading = true;
      listKqAllInfos(this.queryParams).then((res) => {
        this.kqAllInfoList = res.data.results;
        this.total = res.data.count;
        this.loading = false;
      });
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      // const obj = this.businessProgress.toString();
      // this.queryParams.businessProgress = obj;
      this.getList();
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      // this.businessProgress = undefined;
      this.handleQuery();
    },

    // 表单重置
    reset() {
      this.form = {
        id: undefined,
        compName: undefined,
        compOwner: undefined,
        regCap: undefined,
        realCap: undefined,
        foundDay: undefined,
        opStatus: undefined,
        province: undefined,
        city: undefined,
        district: undefined,
        compType: undefined,
        industry: undefined,
        oldName: undefined,
        empNum: undefined,
        phone: undefined,
        otherPhone: undefined,
        address: undefined,
        url: undefined,
        email: undefined,
        businessScope: undefined,
        collaborator: undefined,
        classify: undefined,
        // infoStatus: undefined,
        businessProgress: 0
      };
      // this.businessProgressList = [];
      this.resetForm("form");
      this.kqOrderList = [];
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm("是否确认导出所有岗位数据项?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(function() {
          return exportKqAllInfos(queryParams);
        })
        .then((response) => {
          this.download(response.data.file_url, response.data.name);
        });
    },
    CopyFileUrl(values) {
      const input = document.createElement("input");
      document.body.appendChild(input);
      input.setAttribute("value", values);
      input.select();
      if (document.execCommand("copy")) {
        document.execCommand("copy");
        this.msgSuccess("复制成功");
      }
      document.body.removeChild(input);
    }
  }
};
</script>
